<template>
  <el-form :model="detailForm" ref="detailForm" :inline="false">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="header-card">
        <span class="header-card-title">上传保单</span>
      </div>

      <el-row :gutter="24">
        <el-col :span="24">
          <el-table :data="detailForm.insuranceVoList" border style="width: 100%">

            <el-table-column align="center" label="车型" prop="vinNo" show-overflow-tooltip min-width="200">
              <template #default="{row}">
                {{ row.brandName }}{{ row.modelName ? '/' + row.modelName : '' }}
              </template>
            </el-table-column>

            <el-table-column align="center" label="车架号" prop="vinNo" show-overflow-tooltip min-width="180"/>

            <el-table-column align="center" label="商业险实际开始时间" width="160" prop="syxActualBeginTime">

            </el-table-column>

            <el-table-column align="center" label="商业险实际开始时间" width="160" prop="syxActualEndTime">

            </el-table-column>

            <el-table-column align="center" label="商业险保单号" show-overflow-tooltip width="160" prop="syxPolicyCode">

            </el-table-column>

            <el-table-column align="center" label="交强险实际开始时间" width="160" prop="jqxActualBeginTime">

            </el-table-column>

            <el-table-column align="center" label="交强险实际结束时间" width="160" prop="jqxActualEndTime">

            </el-table-column>

            <el-table-column align="center" label="交强险保单号" show-overflow-tooltip width="160" prop="jqxPolicyCode">

            </el-table-column>

            <el-table-column align="center" label="商业险保单" width="100">
              <template #default="{row}">
                <el-popover placement="right"
                            v-if="row.syxPolicyUrl"
                            trigger="click">
                  <image-common v-model="row.syxPolicyUrl" :disabled="true" :up-type="2"/>
                  <el-button type="text" slot="reference">查看</el-button>
                </el-popover>
              </template>
            </el-table-column>

            <el-table-column align="center" label="交强险保单" width="100">
              <template #default="{row}">
                <el-popover placement="right"
                            v-if="row.jqxPolicyUrl"
                            trigger="click">
                  <image-common v-model="row.jqxPolicyUrl" :disabled="true" :up-type="2"/>
                  <el-button type="text" slot="reference">查看</el-button>
                </el-popover>
              </template>
            </el-table-column>


          </el-table>
        </el-col>
      </el-row>

    </el-card>
  </el-form>
</template>

<script>
export default {
  name: 'informationAudit',//上传保单(车管)
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: '',
    },
  },
  computed: {
    detailForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", {...target, [key]: value});
            return true;
          },
        });
        return proxy;
      },
    },
    isEdit() {
      let bool;
      switch (this.state) {
        case "write":
          bool = true;
          break;
        case "disabled":
          bool = false;
          break;
        case "readonly":
          bool = false;
          break;
      }
      return bool
    }
  },
  data() {
    return {};
  },
  created() {
  },
  mounted() {
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.el-form {
  ::v-deep.formTable {
    margin-bottom: 0;
  }
}

.box-card {
  font-size: 14px;
  margin-bottom: 16px;
}

::v-deep .header-class {
  .cell::before {
    content: "*";
    color: red;
    padding-right: 2px;
    font-size: 14px;
  }
}

::v-deep.component-upload-image {
  margin-left: 25px !important;
}
</style>
